{$layout}

{$var "header"}
<!-- world map -->
<script type="text/javascript" src="/js/echarts/echarts.min.js"></script>
<script type="text/javascript" src="/js/world.js"></script>
<script type="text/javascript" src="/js/world-countries-map.js"></script>
{$end}

{$template "menu"}

<!-- 加载中 -->
<div style="margin-top: 0.8em">
    <div class="ui message loading" v-if="isLoading">
        <div class="ui active inline loader small"></div>  &nbsp; 数据加载中...
    </div>
</div>

<!-- XFF设置提示 -->
<div class="ui message warning" v-if="teaXFFPrompt">
    检测到你正在使用反向代理访问当前系统，如果你的系统确定在一个反向代理服务的上游，为了系统的正常运行，请在安全设置中设置“自定义客户端IP报头”。
    <a href="/settings/security?showAll=1#client-header-names">[去设置]</a> &nbsp; &nbsp;
    <a href="" @click.prevent="dismissXFFPrompt">[关闭提示]</a>
</div>

<!-- 商业版错误 -->
<div class="ui icon message error" v-if="plusErr.length > 0">
    <i class="icon warning circle"></i>
    {{plusErr}}
</div>

<!-- 没有节点提醒 -->
<div class="ui icon message warning" v-if="!isLoading && dashboard.defaultClusterId > 0 && dashboard.countNodes == 0">
    <i class="icon warning circle"></i>
    <a :href="'/clusters/cluster/createNode?clusterId=' + dashboard.defaultClusterId">还没有在集群中添加节点，现在去添加？添加节点后才可部署网站。</a>
</div>

<!-- 新版本更新提醒 -->
<div class="ui icon message error" v-if="!isLoading && newVersionCode.length > 0">
    <i class="icon warning circle"></i>
    升级提醒：有新版本管理系统可以更新：v{{currentVersionCode}} -&gt; v{{newVersionCode}} &nbsp; &nbsp;
    <a href="/settings/updates?doCheck=1">[查看详情]</a>

    <a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>

<!-- 过期提醒 -->
<div class="ui icon message error" v-if="plusExpireDay.length > 0">
    <i class="icon warning circle"></i>
    <a href="/settings/authority"><strong>续费提醒：当前商业版系统即将在 {{plusExpireDay}} 过期，为了您能正常使用相关功能，请及时提前续费。</strong></a>
</div>

<!-- 升级提醒 -->
<div class="ui icon message error" v-if="!isLoading && nodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/clusters">
    升级提醒：有 {{nodeUpgradeInfo.count}} 个边缘节点需要升级到 v{{nodeUpgradeInfo.version}} 版本，系统正在尝试自动升级，请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && userNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/settings/userNodes">升级提醒：有 {{userNodeUpgradeInfo.count}} 个用户节点需要升级到 v{{userNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>
<div class="ui icon message error" v-if="!isLoading && apiNodeUpgradeInfo.count > 0">
    <i class="icon warning circle"></i>
    <a href="/settings/api">升级提醒：有 {{apiNodeUpgradeInfo.count}} 个API节点需要升级到 v{{apiNodeUpgradeInfo.version}} 版本；如果已经升级，请尝试重启API节点进程。</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a></div>

<!-- 本地API节点 -->
<div class="ui icon message error" v-if="!isLoading && localLowerVersionAPINode != null">
    <i class="icon warning circle"></i>
    <span v-if="localLowerVersionAPINode.runtimeVersion == localLowerVersionAPINode.fileVersion">升级提醒：发现一个正在使用的本地API节点版本需要升级，文件位置：{{localLowerVersionAPINode.exePath}}，当前版本：v{{localLowerVersionAPINode.runtimeVersion}}。</span>
    <span v-if="localLowerVersionAPINode.runtimeVersion != localLowerVersionAPINode.fileVersion">升级提醒：发现一个正在使用的本地API节点版本文件已经更新，但需要重启后生效，文件位置：{{localLowerVersionAPINode.exePath}}。 <a href="" @click.prevent="restartAPINode" v-if="!isRestartingLocalAPINode">[帮我重启]</a><span v-if="isRestartingLocalAPINode">尝试重启中...</span></span>
    <a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>

<div class="ui icon message error" v-if="!isLoading && nsNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/ns/clusters">升级提醒：有 {{nsNodeUpgradeInfo.count}} 个DNS节点需要升级到 v{{nsNodeUpgradeInfo.version}} 版本，系统正在尝试自动升级，请耐心等待...</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui icon message error" v-if="!isLoading && reportNodeUpgradeInfo.count > 0 && teaIsPlus">
    <i class="icon warning circle"></i>
    <a href="/clusters/monitors/reporters">升级提醒：有 {{reportNodeUpgradeInfo.count}} 个区域监控终端需要升级到 v{{reportNodeUpgradeInfo.version}} 版本</a><a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>

<!-- 没有硬盘空间提醒 -->
<div class="ui icon message error" v-if="!isLoading && dashboard.diskUsageWarning != null && dashboard.diskUsageWarning.length > 0">
    <i class="icon warning circle"></i>
    <span v-html="dashboard.diskUsageWarning" style="line-height: 1.8"></span>
    <a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>

<!-- 弱密码提示 -->
<div class="ui icon message error" v-if="countWeakAdmins > 0">
    <i class="icon warning circle"></i>
    <a href="/admins?hasWeakPassword=1">安全提醒：有 {{countWeakAdmins}} 个管理员登录账号正在使用弱密码，请及时修改密码，避免产生安全风险。</a>
    <a href="" title="关闭" @click.prevent="closeMessage"><i class="ui icon remove small"></i></a>
</div>
<div class="ui all-chart">
<!-- 总体统计 -->
	<div class="ui four columns grid counter-chart" v-if="!isLoading">
		<div class="ui column">
			<a class="ui cologe" href="/clusters" v-if="dashboard.canGoNodes"><i class="ui icon disk"></i></a>
			<h4>集群</h4>
			<div class="value"><span>{{dashboard.countNodeClusters}}</span>个</div>
		</div>
		<div class="ui column">
			<a class="ui cologe" href="/clusters" v-if="dashboard.canGoNodes"><i class="ui icon cloud"></i></a>
			<h4>边缘节点</h4>
			<div class="value">
				<span>{{dashboard.countNodes}}</span>个
				<span style="font-size: 1em" v-if="dashboard.countOfflineNodes > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/clusters" v-if="dashboard.canGoNodes"><span class="red" style="font-size: 1em">{{dashboard.countOfflineNodes}}离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineNodes}}离线</span></span>
			</div>
		</div>
		<div class="ui column">
			<a class="ui cologe" href="/users" v-if="dashboard.canGoUsers"><i class="ui icon users"></i></a>
			<h4>用户</h4>
			<div class="value"><span>{{dashboard.countUsers}}</span>个
				<span style="font-size: 1em" v-if="dashboard.countOfflineUserNodes > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/settings/userNodes" v-if="dashboard.canGoSettings"><span class="red" style="font-size: 1em">{{dashboard.countOfflineUserNodes}}节点离线</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countOfflineUserNodes}}节点离线</span></span>
			</div>
		</div>
		<div class="ui column with-border">
			<a class="ui cologe" href="/servers" v-if="dashboard.canGoServers"><i class="ui icon clone outsize"></i></a>
			<h4>网站</h4>
			<div class="value"><span>{{dashboard.countServers}}</span>个
				<span style="font-size: 1em" v-if="dashboard.countAuditingServers > 0"><span class="disabled" style="font-size: 1em">/</span> <a href="/servers?auditingFlag=1" v-if="dashboard.canGoServers"><span class="red" style="font-size: 1em">{{dashboard.countAuditingServers}}审核</span></a><span class="red" style="font-size: 1em" v-else>{{dashboard.countAuditingServers}}审核</span></span>
			</div>
		</div>
		<div class="ui column">
			<a class="ui cologe"><i class="ui icon icon30"></i></a>
			<h4>本周流量</h4>
			<div class="value"><span>{{weekTraffic}}</span>{{weekTrafficUnit}}</div>
		</div>
		<div class="ui column">
			<a class="ui cologe"><i class="ui icon icon33"></i></a>
			<h4>昨日流量</h4>
			<div class="value"><span>{{yesterdayTraffic}}</span>{{yesterdayTrafficUnit}}</div>
		</div>
		<div class="ui column">
			<a class="ui cologe"><i class="ui icon icon29"></i></a>
			<h4>当天流量</h4>
			<div class="value"><span>{{todayTraffic}}</span>{{todayTrafficUnit}}&nbsp;
				<span class="red" style="font-size: 1em" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('+') > -1" title="同昨日同时间对比"><span class="disabled" style="font-size: 1em">/</span> {{yesterdayPercentFormat}}%</span>
				<span class="green" style="font-size: 1em" v-if="yesterdayPercentFormat.length > 0 && yesterdayPercentFormat.indexOf('-') > -1" title="同昨日同时间对比"><span class="disabled" style="font-size: 1em">/</span> {{yesterdayPercentFormat}}%</span>
			</div>
		</div>
		<div class="ui column with-border">
			<a class="ui cologe"><i class="ui icon icon28"></i></a>
			<h4>当天独立IP</h4>
			<div class="value">
				<span v-if="todayCountIPs > 0">{{todayCountIPsFormat}}</span>
				<span v-else class="disabled">尚无数据</span>
			</div>
		</div>
	</div>

	<!-- 即时统计 -->
	<div class="ui columns grid realtime-chart" v-if="!isLoading">
		<div class="ui menu text blue" v-show="!isLoading">
			<a href="" class="item" :class="{active: realtimeTab == 'width'}" @click.prevent="selectRealtimeTab('width')">带宽</a>
			<a href="" class="item" :class="{active: realtimeTab == 'cpu'}" @click.prevent="selectRealtimeTab('cpu')">CPU</a>
			<a href="" class="item" :class="{active: realtimeTab == 'ram'}" @click.prevent="selectRealtimeTab('ram')">内存</a>
			<a href="" class="item" :class="{active: realtimeTab == 'load'}" @click.prevent="selectRealtimeTab('load')">负载</a>
		</div>
		<div class="ui column" v-show="realtimeTab == 'width'">
			<link-icon href="/clusters/nodes?trafficOutOrder=desc"></link-icon>
			<div class="percent-box">
				<div id="total-bandwidth-chart-box" class="chart"></div>
				<div class="detail">
					<div class="label">&nbsp;</div>
					<div class="value">&nbsp;</div>
				</div>
				<div class="summary" v-if="nodeValuesStat != null">总{{nodeValuesStat.totalTrafficPerSecondSizeFormat}}<span>{{nodeValuesStat.totalTrafficPerSecondUnitFormat}}</span>
				</div>
			</div>
		</div>
		<div class="ui column" v-show="realtimeTab == 'cpu'">
			<link-icon href="/clusters/nodes?cpuOrder=desc"></link-icon>
			<div class="percent-box">
				<div id="all-cpu-chart-box" class="chart"></div>
				<div class="detail">
					<div class="label">平均CPU用量</div>
					<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgCPUUsageFormat}}%</div>
				</div>
				<div class="summary" v-if="nodeValuesStat != null">共{{nodeValuesStat.totalCPUCores}}核</div>
			</div>
		</div>
		<div class="ui column" v-show="realtimeTab == 'ram'">
			<link-icon href="/clusters/nodes?memoryOrder=desc"></link-icon>
			<div class="percent-box">
				<div id="all-memory-chart-box" class="chart"></div>
				<div class="detail">
					<div class="label">平均内存用量</div>
					<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgMemoryUsageFormat}}%</div>
				</div>
				<div class="summary" v-if="nodeValuesStat != null">共{{nodeValuesStat.totalMemoryFormat}}</div>
			</div>
		</div>
		<div class="ui column with-border" v-show="realtimeTab == 'load'">
			<link-icon href="/clusters/nodes?loadOrder=desc"></link-icon>
			<div class="percent-box">
				<div id="all-load-chart-box" class="chart"></div>
				<div class="detail">
					<div class="label">平均负载</div>
					<div class="value" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad1minFormat}}/min</div>
				</div>
				<div class="summary" v-if="nodeValuesStat != null">{{nodeValuesStat.avgLoad5minFormat}}/5min</div>
			</div>
		</div>
	</div>
</div>

<chart-columns-grid>
    <div class="ui column">
        <!-- 流量地图 -->
        <div v-if="!isLoading">
            <traffic-map-box :v-stats="topCountryStats"></traffic-map-box>
        </div>
    </div>

    <div class="ui column">
        <!-- 流量 -->
        <div class="ui menu text blue" style="justify-content:flex-end" v-show="!isLoading">
            <a href="" class="item" :class="{active: trafficTab == 'thourly'}" @click.prevent="selectTrafficTab('thourly')">24小时流量趋势</a>
            <a href="" class="item" :class="{active: trafficTab == 'tdaily'}" @click.prevent="selectTrafficTab('tdaily')">15天流量趋势</a>
            <a href="" class="item" :class="{active: trafficTab == 'rhourly'}" @click.prevent="selectTrafficTab('rhourly')">24小时访问量趋势</a>
            <a href="" class="item" :class="{active: trafficTab == 'rdaily'}" @click.prevent="selectTrafficTab('rdaily')">15天访问量趋势</a>
        </div>
        <div class="ui divider"></div>

        <!-- 按小时统计 -->
        <div class="chart-box" id="hourly-traffic-chart-box" v-show="trafficTab == 'thourly'"></div>
        
        <!-- 按日统计 -->
        <div class="chart-box" id="daily-traffic-chart-box" v-show="trafficTab == 'tdaily'"></div>
        
         <!-- 按小时统计访问量 -->
        <div class="chart-box" id="hourly-requests-chart" v-show="trafficTab == 'rhourly'"></div>
        
        <!-- 按日统计访问量 -->
        <div class="chart-box" id="daily-requests-chart" v-show="trafficTab == 'rdaily'"></div>
    </div>

    <div class="ui column">
        <!-- 域名排行 -->
        <h4 v-show="!isLoading">域名访问排行 <span>（24小时）</span></h4>
        <div class="ui divider"></div>
        <div class="chart-box" id="top-domains-chart"></div>
    </div>

    <div class="ui column">
        <!-- 节点排行 -->
        <h4 v-show="!isLoading">节点访问排行 <span>（24小时）</span></h4>
        <div class="ui divider"></div>
        <div class="chart-box" id="top-nodes-chart"></div>
    </div>

    <!-- 指标 -->
    <metric-chart v-for="chart in metricCharts"
                  :key="chart.id"
                  :v-chart="chart.chart"
                  :v-stats="chart.stats"
                  :v-item="chart.item"
                  :v-column="true"
    >
    </metric-chart>
</chart-columns-grid>

